<template>
	<scroll-view class="goods-scroll" @scroll="onGoodsScroll" :scroll-into-view="classifyType" scroll-y
	 scroll-with-animation>
		<view class="goods-wrap">
			<template v-for="(item, index) in goodsList">
				<view :class="'goods-section goods-' + index" :id="'classify' + index" :ref="'classify' + index" :key="item.id">
					<view class="classify-name">/ {{item.name}} /</view>
					<template v-for="(pItem, pIndex) in item.products">
						<goods :key="pIndex + pItem.id" :product="pItem" v-if="pItem.code && pItem.col_type == 0 && pItem.isAvailable"></goods>
					</template>
				</view>
			</template>
		</view>
	</scroll-view>
</template>

<script>
	import goods from '../goods/goods.vue';
	
	import {
		throttle
	} from '@/common/js/util.js';
	
	export default {
		name: 'MenuGoods',
		components: {goods},
		props: {
			// 分类类型
			classifyType: {
				type: String
			},
			
			// 商品列表
			goodsList: {
				type: Array,
				default() {
					return []
				}
			},
		},
		data() {
			return {
	
			}
		},
		watch: {
			goodsList(list) {
				if (list.length) {
					this.$nextTick(() => {
						this.initViewHeight();
					})
				}
			}
		},
		mounted() {
			
		},
		methods: {
			//商品区域滚动事件（节流函数处理，提升性能)
			onGoodsScroll: throttle(function(e) {
				this.$emit('onGoodsScroll', e);
			}, 300),
			
			// 初始化视图高度
			initViewHeight() {
				const goodsList = this.goodsList || [];
				if (goodsList.length) {
					const viewHeights = []; // 视图高度数组，每个分类的产品所占的视图高度
					for (let i = 0; i < goodsList.length; i++) {
						// 只有H5才走此方法
						// #ifdef H5
						const items = this.$refs['classify' + i];
						const height = items[0].$el.offsetHeight;
						viewHeights.push(height);
						// #endif
			
						// 除了H5都走这里面的方法
						// #ifndef H5
						const query = uni.createSelectorQuery()
						query.select(`.goods-${i}`)
							.boundingClientRect(rect => {
								viewHeights.push(rect.height);
							}).exec()
						// #endif
					}

					this.$emit('getViewHeights', viewHeights);
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	@import '~@/common/styles/common.less';
	@import "./menu-goods.less";
</style>
